// 轮播图独立JavaScript文件


// 获取轮播图容器元素
var carousel = document.querySelector(".carousel");

// 获取轮播图内部容器元素
var carouselInner = carousel.querySelector(".carousel-inner");


// 获取所有轮播图项元素
var carouselItems = carouselInner.querySelectorAll(".carousel-item");

// 获取控制按钮元素 (这里直接获取prev和next按钮)
var carouselControlPrev = carousel.querySelector(".carousel-control-prev");
var carouselControlNext = carousel.querySelector(".carousel-control-next");

// 获取指示器容器
var indicatorsContainer = carousel.querySelector(".carousel-indicators");

// 获取lightbox元素
var lightbox = document.querySelector(".lightbox");
var lightboxImage = lightbox.querySelector("img");

// 获取lightbox控制按钮
var lightboxControlPrev = lightbox.querySelector(".lightbox-control-prev");
var lightboxControlNext = lightbox.querySelector(".lightbox-control-next");

// 当前活动的轮播项索引
var currentItem = 0;

// 自动轮播的时间间隔（毫秒）
var interval = 3000;

// 自动轮播的定时器
var autoInterval;

// 动态生成指示器
function generateIndicators() {
    indicatorsContainer.innerHTML = ''; // 清空现有的指示器
    carouselItems.forEach(function(item, index) {
        var indicator = document.createElement('li');
        indicator.addEventListener('click', function() {
            changeItem(index - currentItem); // 切换到点击的指示器对应的图片
            startCarousel(); // 手动切换后重新开始自动轮播
        });
        if (index === 0) {
            indicator.classList.add("active"); // 默认第一个指示器为活动状态
        }
        indicatorsContainer.appendChild(indicator);
    });
}

// 切换轮播项的函数
function changeItem(step) {
    // 移除当前活动项的active类
    carouselItems[currentItem].classList.remove("active");
    // 移除当前活动指示器的active类
    indicatorsContainer.querySelectorAll('li')[currentItem].classList.remove("active");
    // 计算新的当前项索引，并使用模运算确保索引在有效范围内
    currentItem = (currentItem + step + carouselItems.length) % carouselItems.length;
    // 添加新的当前项的active类
    carouselItems[currentItem].classList.add("active");
    // 添加新的当前指示器的active类
    indicatorsContainer.querySelectorAll('li')[currentItem].classList.add("active");
    // 手动切换时终止自动轮播
    clearInterval(autoInterval); // 清除当前的自动轮播定时器
}

// 开始自动轮播的函数
function startCarousel() {
    // 每次开始前都清除旧的定时器，防止重复设置
    clearInterval(autoInterval);
    // 设置定时器，每隔interval毫秒调用changeItem函数，自动切换到下一张图片
    autoInterval = setInterval(() => {
        changeItem(1);
    }, interval);
}

// 页面加载完成后开始自动轮播
document.addEventListener('DOMContentLoaded', () => {
    // 动态生成指示器
    generateIndicators();

    // 开始自动轮播
    startCarousel();

    // 为“上一个”按钮添加点击事件监听器
    carouselControlPrev.addEventListener("click", function(e) {
        e.preventDefault(); // 阻止默认行为
        changeItem(-1); // 点击上一个按钮时切换到上一张图片
        startCarousel(); // 手动切换后重新开始自动轮播
    });

    // 为“下一个”按钮添加点击事件监听器
    carouselControlNext.addEventListener("click", function(e) {
        e.preventDefault(); // 阻止默认行为
        changeItem(1); // 点击下一个按钮时切换到下一张图片
        startCarousel(); // 手动切换后重新开始自动轮播
    });

    // 为轮播图内部容器添加点击事件监听器 (左右区域点击切换)
    carouselInner.addEventListener('click', function(event) {
        // 检查点击的是否是图片本身，避免点击按钮时触发
        if (event.target.tagName === 'IMG') {
            const rect = event.target.getBoundingClientRect();
            const x = event.clientX - rect.left;
            if (x < rect.width / 2) {
                changeItem(-1); // 点击图片左边时切换到上一张图片
            } else {
                changeItem(1); // 点击图片右边时切换到下一张图片
            }
            startCarousel(); // 手动切换后重新开始自动轮播
        }
    });

    // 为轮播图项内的图片添加点击事件监听器 (打开Lightbox)
    carouselItems.forEach(function(item) {
        const img = item.querySelector('img');
        img.addEventListener('click', function(e) {
            e.stopPropagation(); // 阻止事件冒泡到 carouselInner，避免同时触发切换
            // 显示lightbox
            lightbox.style.display = 'flex';
            // 设置lightbox中的图片源
            lightboxImage.src = this.src;
            // 更新lightbox中的当前图片索引（与轮播图保持一致）
            // 注意：这里currentItem已经是最新的了，因为之前的点击会更新它
            // 如果希望lightbox从点击的图片开始，需要更精细的逻辑
            // 例如，你可以传递currentItem到lightbox函数
        });
    });

    // 为lightbox的上一个按钮添加点击事件监听器
    lightboxControlPrev.addEventListener("click", function(e) {
        e.stopPropagation(); // 阻止事件冒泡到lightbox，避免关闭lightbox
        e.preventDefault(); // 阻止默认行为
        changeItem(-1); // 切换到上一张图片
        // 更新lightbox中的图片源
        lightboxImage.src = carouselItems[currentItem].querySelector('img').src;
    });

    // 为lightbox的下一个按钮添加点击事件监听器
    lightboxControlNext.addEventListener("click", function(e) {
        e.stopPropagation(); // 阻止事件冒泡到lightbox，避免关闭lightbox
        e.preventDefault(); // 阻止默认行为
        changeItem(1); // 切换到下一张图片
        // 更新lightbox中的图片源
        lightboxImage.src = carouselItems[currentItem].querySelector('img').src;
    });

    // 为lightbox添加点击事件监听器，点击lightbox背景关闭lightbox
    lightbox.addEventListener('click', function(e) {
        // 只有点击背景时才关闭，不点击图片或按钮
        if (e.target === lightbox) {
            lightbox.style.display = 'none';
        }
    });
});